import { VC, Component } from '@/VC-vue'
import { Toast } from 'mand-mobile'
import { debounce } from '@/utils/common.ts'
import {
    getRuleKind,
    getRuleList,
    getTargetList,
    getDeptList,
    getPatientList,
    insertTask
} from '@/services/control'
import './home.styl'

@Component({})
export default class Home extends VC {
    ruleKinds: any[] = []
    showRuleKind: boolean = false
    ruleKindName: string = ''

    rules: any[] = []
    showRules: boolean = false
    ruleName: string[] = []

    targetLevelList: any = [
        {
            value: 1,
            text: '病区'
        },
        {
            value: 2,
            text: '科室'
        },
        {
            value: 3,
            text: '医生'
        },
        {
            value: 4,
            text: '患者'
        },
        {
            value: 5,
            text: '全院'
        }
    ]
    targetLevel: string = ''
    showTargetLevel: boolean = false

    area: string = ''
    showArea: boolean = false
    showAreaSelector: boolean = false
    areaList: any[] = []

    showTarget: boolean = false
    targetList: any = []
    target: string = ''

    showSearch: boolean = false
    patientList: any[] = []
    showPatient: boolean = false
    patient: string = ''

    editInfo: any = {}
    isChoose: boolean = false

    choosePatient(e: any) {
        this.patient = e.text
        this.editInfo.targetId = e.value
        this.isChoose = true
    }

    chooseArea(e: any) {
        this.area = e.text
        this.editInfo.areaId = e.value
        const params = {
            bqdm: e.value
        }
        const curList: any[] = []
        getDeptList(params).then(r => {
            r.data &&
                r.data.map((item: any) => {
                    const obj = {
                        value: item.targetId,
                        text: item.targetName
                    }
                    curList.push(obj)
                })
            this.targetList = curList
        })
    }

    chooseTargetItem(e: any) {
        this.target = e.text
        this.editInfo.targetId = e.value
    }

    chooseTarget(e: any) {
        this.isChoose = false
        this.targetLevel = e.text
        this.editInfo.targetLevel = e.value
        // 选择时清空下面筛选的内容
        this.areaList = []
        this.area = ''
        this.target = ''
        this.patient = ''
        // 清空提交表单的内容
        delete this.editInfo.areaId
        delete this.editInfo.targetId
        delete this.editInfo.patientId
        this.showArea = e.value === 2
        const params = {
            targetLevel: e.value
        }
        if (e.value === 3 || e.value === 4) {
            this.showSearch = true
        }
        if (e.value === 5) {
            this.showSearch = false
        }
        const curList: any[] = []
        getTargetList(params).then(r => {
            r.data &&
                r.data.map((item: any) => {
                    const obj = {
                        value: item.targetId,
                        text: item.targetName
                    }
                    curList.push(obj)
                })
            if (e.value === 2) {
                this.areaList = curList
            } else if (e.value === 1) {
                this.targetList = curList
            }
        })
    }

    showSelector(value: any) {
        const _self: any = this
        _self[value] = true
    }
    mounted() {
        this._search = debounce(this._search, 400)
        getRuleKind().then(r => {
            const curList: any[] = []
            r.data &&
                r.data.map((item: any) => {
                    const obj = {
                        value: item.ruleKindId,
                        text: item.ruleKindName
                    }
                    curList.push(obj)
                })
            this.ruleKinds = curList
        })
    }

    onSelectorChoose(e: any) {
        this.ruleName = []
        this.editInfo.ruleIds = []
        this.rules.map(r => {
            e.map((item: object) => {
                if (r.value === item) {
                    this.ruleName.push(r.text)
                    this.editInfo.ruleIds.push(r.value)
                }
            })
        })
    }

    // 输入事件
    _search(name: string, value: string) {
        const params = {
            name: value
        }

        if (value != '' && !this.isChoose) {
            getPatientList(params).then(r => {
                if (r.data) {
                    const curList: any[] = []
                    this.showPatient = true
                    r.data.map((item: any) => {
                        const obj = {
                            value: item.targetId,
                            text: item.targetName
                        }
                        curList.push(obj)
                    })
                    this.patientList = curList
                } else {
                    Toast.failed('暂无搜索结果', 1000)
                }
            })
        }
    }

    chooseKind(e: any) {
        this.ruleKindName = e.text
        this.editInfo.ruleKindId = e.value
        const params = {
            ruleKindId: e.value
        }
        getRuleList(params).then(r => {
            const curList: any[] = []
            r.data &&
                r.data.map((item: any) => {
                    const obj = {
                        value: item.ruleId,
                        text: item.ruleName
                    }
                    curList.push(obj)
                })
            this.rules = curList
        })
    }

    _submit() {
        Toast.loading('提交中...')
        insertTask(this.editInfo).then(res => {
            Toast.hide()
            Toast.succeed('操作成功', 2000, true)
            setTimeout(() => {
                this.$router.push({
                    path: '/done'
                })
            }, 2000)
        })
    }
    // 隐藏搜索的选择器
    hideSelector() {
        setTimeout(() => {
            this.isChoose = false
        }, 400)
    }

    renderContent(ruleName: any) {
        console.log(ruleName)
        return ruleName.length > 0 ? (
            <div class="rule_main">
                {ruleName.map((res: any) => {
                    return <p>{res}</p>
                })}
            </div>
        ) : (
            <div>{ruleName}</div>
        )
    }

    renderForm() {
        return (
            <md-field title="新建任务" brief="请按照需求进行配置">
                {/* 规则大类 */}
                <md-field-item
                    solid
                    arrow
                    title="规则大类"
                    placeholder="请选择"
                    content={this.ruleKindName}
                    onclick={this.showSelector.bind(this, 'showRuleKind')}
                />
                <md-selector
                    v-model={this.showRuleKind}
                    data={this.ruleKinds}
                    max-height="320px"
                    title="规则大类"
                    onchoose={this.chooseKind}
                />
                {/* 质控项目 */}
                <md-field-item
                    solid
                    arrow
                    title="质控项目"
                    placeholder="请选择"
                    class="diy_field"
                    onclick={this.showSelector.bind(this, 'showRules')}
                >
                    {this.ruleName.length > 0 ? null : (
                        <p class="placeholder">请选择</p>
                    )}

                    {this.renderContent(this.ruleName)}
                </md-field-item>
                <md-selector
                    v-model={this.showRules}
                    data={this.rules}
                    max-height="320px"
                    title="质控项目"
                    multi={true}
                    okText="确定"
                    cancelText="取消"
                    onconfirm={this.onSelectorChoose}
                />
                {/* 对象层级 */}
                <md-field-item
                    solid
                    arrow
                    title="对象层级"
                    placeholder="请选择"
                    content={this.targetLevel}
                    onclick={this.showSelector.bind(this, 'showTargetLevel')}
                />
                <md-selector
                    v-model={this.showTargetLevel}
                    data={this.targetLevelList}
                    max-height="320px"
                    title="对象层级"
                    onchoose={this.chooseTarget}
                />
                {/* 选择病区 针对科室*/}
                <md-field-item
                    solid
                    arrow
                    v-show={this.showArea}
                    title="选择病区"
                    placeholder="请选择"
                    content={this.area}
                    onclick={this.showSelector.bind(this, 'showAreaSelector')}
                />
                <md-selector
                    v-model={this.showAreaSelector}
                    data={this.areaList}
                    max-height="320px"
                    title="选择病区"
                    onchoose={this.chooseArea}
                />
                {/* 选择病区  */}
                <md-field-item
                    solid
                    arrow
                    v-show={this.targetLevel !== '全院' && !this.showSearch}
                    title="质控对象"
                    placeholder="请选择"
                    content={this.target}
                    onclick={this.showSelector.bind(this, 'showTarget')}
                />
                <md-selector
                    v-model={this.showTarget}
                    data={this.targetList}
                    max-height="320px"
                    title="质控对象"
                    onchoose={this.chooseTargetItem}
                />
                {/* 质控对象，针对患者、医生，可搜索 */}
                <md-input-item
                    ref="input"
                    v-show={this.showSearch}
                    title="质控对象"
                    v-model={this.patient}
                    placeholder="请输入文字进行搜索"
                    onchange={this._search}
                    clearable
                />
                <md-selector
                    v-model={this.showPatient}
                    data={this.patientList}
                    max-height="320px"
                    title="质控对象"
                    onchoose={this.choosePatient}
                    onhide={this.hideSelector}
                />
            </md-field>
        )
    }

    render() {
        return (
            <div class="home-container">
                {this.renderForm()}
                <md-button
                    type="primary"
                    class="submit-btn"
                    onclick={this._submit}
                >
                    提交
                </md-button>
            </div>
        )
    }
}
